<template>
	<el-container>
			<el-main class="nopadding">
				<el-header>
					<div class="left-panel">
						<span style="font-size: 18px;font-weight: 600">工作日志</span>
					</div>
					<div class="right-panel">
						<el-button type="primary" icon="el-icon-edit-pen" @click="createDiary"></el-button>
					</div>
				</el-header>
				<component :ref="isComponent" :is="isComponent"/>
			</el-main>
		<el-aside>
			<el-container>
				<el-main class="nopadding">
					<el-tabs tab-position="top" style="padding-left: 10px;padding-right: 10px;" v-model="groupId" @tab-change="tabChange">
						<el-tab-pane label="我的日志" name="mydiarylist" :tabActiveName="true">
							<el-main class="nopadding">
							<el-calendar @click="getMyDiary" v-model="myDate"></el-calendar>
							</el-main>
							<el-footer style="text-align: center;">
								<el-button type="primary" @click="clearDiaryDay">全部</el-button>
							</el-footer>
						</el-tab-pane>
						<el-tab-pane label="我的下属" name="subordinateslist">
							<el-container>
								<el-main class="nopadding">
										<ul class="msg-list">
											<li v-for="item in userList" v-bind:key="item.accountId" @click="getSubordinatesDiaryListByUser(item.accountId)" style="cursor: pointer;">
												<a target="_blank">
													<div class="msg-list__icon">
														<el-badge type="danger">
															<el-avatar :size="40" :src="item.avatar"></el-avatar>
														</el-badge>
													</div>
													<div class="msg-list__main">
														<h2>{{ item.userName }}</h2>
														<p>{{ item.deptName }}</p>
													</div>
													<div class="msg-list__time">
														<p>{{ item.levelName }}</p>
													</div>
												</a>
											</li>
											<el-empty v-if="userList.length==0" description="暂无下属" :image-size="100"></el-empty>
										</ul>
								</el-main>
								<el-footer style="text-align: center;">
									<el-button type="primary" @click="clearSubordinatesUser">全部</el-button>
								</el-footer>
							</el-container>
						</el-tab-pane>
						<el-tab-pane label="他人分享" name="sharelist">
							<el-container>
								<el-main class="nopadding">
										<ul class="msg-list">
											<li v-for="item in shareUserList" v-bind:key="item.accountId" @click="getShareDiaryListByUser(item.accountId)" style="cursor: pointer;">
												<a target="_blank">
													<div class="msg-list__icon">
														<el-badge type="danger">
															<el-avatar :size="40" :src="item.avatar"></el-avatar>
														</el-badge>
													</div>
													<div class="msg-list__main">
														<h2>{{ item.userName }}</h2>
														<p>{{ item.deptName }}</p>
													</div>
													<div class="msg-list__time">
														<p>{{ item.levelName }}</p>
													</div>
												</a>
											</li>
											<el-empty v-if="shareUserList.length==0" description="暂无他人分享" :image-size="100"></el-empty>
										</ul>
								</el-main>
								<el-footer style="text-align: center;">
									<el-button type="primary" @click="clearShareUser">全部</el-button>
								</el-footer>
							</el-container>
						</el-tab-pane>
					</el-tabs>
				</el-main>
			</el-container>
		</el-aside>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
import moment from "moment/moment";
import saveDialog from './save'
import mydiarylist from "./mydiarylist"
import subordinateslist from "./subordinateslist"
import sharelist from "./sharelist"

export default {
	name: 'Work Diary',
	components: {
		saveDialog,
		mydiarylist,
		subordinateslist,
		sharelist
	},
	data() {
		return {
			myDate: "",
			dialog: {
				save: false
			},
			groupId: "mydiarylist",
			isComponent: "mydiarylist",
			userList: [],
			shareUserList:[]
		}
	},
	mounted() {
	},
	methods: {
		tabChange(name) {
			if (name == "subordinateslist") {
				this.getMySubordinates();
			}else if(name=="sharelist")
			{
				this.getShareDiaryUserList();
			}
			this.isComponent = name;
		},
		async getShareDiaryUserList() {
			var res = await this.$API.office.diary.getShareDiaryUserList.get();
			if (res.code == 200) {
				if(res.data)
				{
					this.shareUserList = res.data;
				}
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getMySubordinates() {
			var res = await this.$API.system.user.getMySubordinates.get();
			if (res.code == 200) {
				if(res.data) {
					this.userList = res.data;
				}
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		createDiary() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		},
		clearDiaryDay()
		{
			this.$refs.mydiarylist.getMyDiaryList("");
		},
		getMyDiary() {
			this.$refs.mydiarylist.getMyDiaryList(moment(this.myDate).format('YYYY-MM-DD'));
		},
		clearShareUser()
		{
			this.$refs.sharelist.getShareDiaryListByUser("");
		},
		getShareDiaryListByUser(accountId) {
			this.$refs.sharelist.getShareDiaryListByUser(accountId);
		},
		clearSubordinatesUser(){
			this.$refs.subordinateslist.getSubordinatesDiaryListByUser("");
		},
		getSubordinatesDiaryListByUser(accountId)
		{
			this.$refs.subordinateslist.getSubordinatesDiaryListByUser(accountId);
		},
		handleSaveSuccess()
		{
			if(this.groupId == "mydiarylist"){
				this.$refs.mydiarylist.handleSaveSuccess()
			}else if (this.groupId == "subordinateslist") {
				this.$refs.subordinateslist.handleSaveSuccess()
			}else if(this.groupId=="sharelist")
			{
				this.$refs.sharelist.handleSaveSuccess()
			}
		}
	}
}
</script>

<style scoped>
:deep(.el-calendar__header) {
	padding: 0px 0px 10px 0px;
}

:deep(.el-calendar-table .el-calendar-day) {
	height: 30px;
	text-align: center;
}

:deep(.el-calendar-table td) {
	border-bottom: 0px solid #EBEEF5;
	border-right: 0px solid #EBEEF5;
}

:deep(.el-calendar-table tr td:first-child) {
	border-left: 0px solid #EBEEF5;
}

:deep(.el-calendar-table tr:first-child td) {
	border-top: 0px solid #EBEEF5;
}

:deep(.el-calendar__body) {
	border-top: 1px solid #EBEEF5;
	padding: 5px;

p {
	text-align: center;

i {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	background-color: #D0333C;
	border-radius: 50%;
	text-align: center;
}

}
}
:deep(.el-calendar__header) {
	border-bottom: 0px solid #EBEEF5;

.el-calendar__title {
	display: none;
}

.el-calendar__button-group {
	margin-left: 10%;
}

}
:deep(.el-input__inner) {
	line-height: 28px;
	height: 28px;
	width: 100%;
}

:deep(.el-date-editor.el-input) {
	width: 30%;
	float: left;

.el-input__icon {
	line-height: 28px;
}

}
:deep(.el-input--suffix .el-input__inner) {
	padding-right: 0px;
}

:deep(.el-input__suffix) {
	display: none;
}

div:hover {
	color: #2c3e50;
}

.msg-list li {
	border-top: 1px solid #eee;
}

.msg-list li a {
	display: flex;
	padding: 20px;
}

.msg-list li a:hover {
	background: #ecf5ff;
}

.msg-list__icon {
	width: 40px;
	margin-right: 15px;
}

.msg-list__main {
	flex: 1;
}

.msg-list__main h2 {
	font-size: 15px;
	font-weight: normal;
	color: #333;
}

.msg-list__main p {
	font-size: 12px;
	color: #999;
	line-height: 1.8;
	margin-top: 5px;
}

.msg-list__time {
	width: 100px;
	text-align: right;
	color: #999;
}
</style>
